
<template>
    <div class="box">
        <!-- <Vue3Lottie :animationData=toJson2 :height="200" :width="200" class="JSONcontainer" /> -->
        <!-- <Vue3Lottie :animationData="toJson" :height="250" :width="250" class="JSONcontainer" /> -->
        <div class="formcontainer">
            <div class="logo">
            </div>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="username" prop="username">
                    <el-input style="width: 200px" size="large" v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="password" prop="password">
                    <el-input style="width: 200px" size="large" type="password" v-model="ruleForm.password" />
                </el-form-item>
                <el-form-item class="el-form-item3">
                    <button @click.prevent="handlerLogin(ruleFormRef)">Login</button>
                    <button @click.prevent="handlerReg(ruleFormRef)">Reg</button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useUser } from '@/store';
import { UserType } from '@/api/user/type';
import type { FormInstance, FormRules } from 'element-plus'

// 使用pinia中的登录fn
const useUserStore = useUser()
// 表单验证
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<UserType>({
    username: "joke",
    password: "123456"
})
const rules = reactive<FormRules<UserType>>({
    username: [
        { required: true, message: 'Please input Activity username', trigger: 'blur' },
        { min: 3, max: 9, message: 'Length should be 3 to 9', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Please input Activity password', trigger: 'blur' },
        { min: 3, max: 9, message: 'Length should be 3 to 9', trigger: 'blur' },
    ]
})

// 登录
const handlerLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            useUserStore.Login(ruleForm)
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 注册
const handlerReg = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            useUserStore.Reg(ruleForm)
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 重置
// const resetForm = (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     formEl.resetFields()
// }

// import toJson from "@/assets/animation_lnyd2kql.json"
// import toJson2 from "@/assets/animation_lny1rdnl.json"



</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100vh;
    background-color: #05011b;
    background: url("@/assets/blue-wall-empty-room-with-concrete-floor.jpg") 100% 100% no-repeat;
    background-attachment: fixed;
    background-size: cover;

}


.formcontainer {
    width: 750px;
    height: 460px;
    display: flex;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 1px 2px 11px 2px #5C5A59;
    box-shadow: 1px 2px 11px 2px #e6e5e5;
    border-radius: 30px;
    overflow: hidden;
    z-index: 6;

    .logo {
        flex: 6;
        opacity: 0.5
    }

    /deep/ .el-form {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px;

        .el-form-item__content {
            justify-content: space-between;
            align-items: center;
        }
    }

}
</style>